<template>
  <div class="button-demo">
    <h2>按钮组件示例</h2>

    <section class="demo-block">
      <h3>基础用法</h3>
      <volvo-button>默认按钮</volvo-button>
    </section>

    <section class="demo-block">
      <h3>不同尺寸</h3>
      <volvo-button size="large">大按钮</volvo-button>
      <volvo-button>中按钮</volvo-button>
      <volvo-button size="small">小按钮</volvo-button>
      <volvo-button size="mini">迷你按钮</volvo-button>
    </section>

    <section class="demo-block">
      <h3>不同类型</h3>
      <volvo-button type="primary">主要按钮</volvo-button>
      <volvo-button type="secondary">次要按钮</volvo-button>
      <volvo-button type="tertiary">文本按钮</volvo-button>
    </section>

    <section class="demo-block">
      <h3>自定义颜色</h3>
      <volvo-button backgroundColor="#ff0000" textColor="#ffffff">红色按钮</volvo-button>
      <volvo-button backgroundColor="#4CAF50" textColor="#ffffff">绿色按钮</volvo-button>
    </section>

    <section class="demo-block">
      <h3>状态展示</h3>
      <volvo-button loading>加载中</volvo-button>
      <volvo-button disabled>禁用按钮</volvo-button>
      <volvo-button isDark>暗黑按钮</volvo-button>
    </section>
  </div>
</template>

<script setup>
import VolvoButton from '../components/button/index.vue'
</script>

<style lang="scss" scoped>
.button-demo {
  padding: 20px;

  h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }

  .demo-block {
    margin-bottom: 32px;

    h3 {
      margin-bottom: 16px;
      font-size: 18px;
      color: #333;
    }

    .volvo-button {
      margin-right: 16px;
      margin-bottom: 16px;
    }
  }
}
</style>
